<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修改页面</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css"/>
</head>
<body>
<div class="center-container">
    <form class="layui-form" id="editFrom" action="">
        <div class="mainBox">
            <div class="main-container">
                <!-- id -->
                <div class="layui-form-item">
                    <label class="layui-form-label">ID</label>
                    <div class="layui-input-block">
                        <input id="input_id" name="id" type="text"
                                readonly
                               lay-verify="required" placeholder="ID" class="layui-input">
                    </div>
                </div>

                <!-- 学生姓名 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">学生姓名</label>
                    <div class="layui-input-block">
                        <input id="input_sno_dropdown" name="sno" type="text"
                               data-sno = "" readonly
                               lay-verify="required" placeholder="学生姓名" class="layui-input">
                    </div>
                </div>

                <!-- 课程名称 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">课程名称</label>
                    <div class="layui-input-block">
                        <input id="input_courseNo_dropdown" name="courseNo" type="text"
                               data-courseNo = "" readonly
                               lay-verify="required" placeholder="课程名称" class="layui-input">
                    </div>
                </div>


                <!-- 课程成绩 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">课程成绩</label>
                    <div class="layui-input-block">
                        <input id="input_score" name="score" type="number"
                               lay-verify="required" placeholder="课程成绩" class="layui-input">
                    </div>
                </div>

                <!-- 绩点 -->
                <div class="layui-form-item">
                    <label class="layui-form-label">绩点</label>
                    <div class="layui-input-block">
                        <input id="input_gpa" name="gpa" type="number" placeholder="绩点" class="layui-input">
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="button-container">
                <button type="submit" class="pear-btn pear-btn-primary pear-btn-sm" lay-submit=""
                        lay-filter="score-save">
                    <i class="layui-icon layui-icon-ok"></i>
                    提交
                </button>
                <button type="reset" class="pear-btn pear-btn-sm">
                    <i class="layui-icon layui-icon-refresh"></i>
                    重置
                </button>
            </div>
        </div>
    </form>
</div>

<script src="/component/layui/layui.js"></script>
<script src="/component/pear/pear.js"></script>
<script>
    layui.use(['form', 'jquery', 'dropdown'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let dropdown = layui.dropdown;

        // 初始化表单数据
        window.initForm = function(data) {
            console.log("初始化表单数据:", data);
            if (!data) {
                console.error("初始化表单时，数据为空！");
                return;
            }

            // 使用表单ID为 'editFrom' 的表单来初始化
            $.each(data, function(key, value) {
                let field = $('#editFrom [name="' + key + '"]'); // 修改为 'editFrom' 表单

                if (field.length) {  // 确保字段存在
                    if (field.is(':radio')) {  // 对于单选框
                        field.filter('[value="' + value + '"]').prop("checked", true);  // 填充单选框
                    } else if (field.is(':checkbox')) {  // 对于复选框
                        field.prop("checked", value === "yes");  // 填充复选框
                    } else {  // 对于其他文本框等字段
                        field.val(value);  // 填充其他字段
                    }
                }
            });

            layui.form.render(); // 渲染表单
            console.log("表单已初始化:", data);
        };

        form.on('submit(score-save)', function (data) {



            // 设置编号
            if ($('#input_sno_dropdown').attr("data-sno") !== "") {
                data.field.sno = $('#input_sno_dropdown').attr("data-sno");
            }
            if($('#input_courseNo_dropdown').attr("data-courseNo") !== "") {
                data.field.courseNo = $('#input_courseNo_dropdown').attr("data-courseNo");
            }


            console.log("新增表单数据" + JSON.stringify(data.field));
            $.ajax({
                url: '/api/sc/update',
                data: JSON.stringify(data.field),
                dataType: 'json', // 返回指定数据类型为 JSON
                contentType: 'application/json', // 设置请求参数类型为 JSON
                type: 'PUT',
                success: function (result) {
                    if (result.code === 200) {
                        // 成功回调，处理返回的数据
                        console.log("编辑成功", result);
                        layer.msg(result.msg, {
                            icon: 1,
                            time: 500
                        }, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window
                                .name)); //关闭当前页
                            parent.layui.table.reload("sc-table");
                        });
                    } else {
                        // 成功回调，处理返回的数据
                        console.error("编辑失败", result);
                        layer.msg(result.msg, {
                            icon: 2,
                            time: 500
                        });
                    }
                }
            })
            return false;
        });

        // 监听学生编号的输入框的点击事件
        $('#input_sno_dropdown').click(() => {
            console.log("点击了教师编号(名称)的下拉菜单，查询教师信息");
            // 使用 Ajax 请求获取数据
            $.ajax({
                url: '/api/student/getAllDifferentSName', // 后端接口地址
                method: 'GET', // 请求方式
                dataType: 'json', // 预期服务器返回的数据类型
                success: function (response) {
                    console.log("获取到的学生信息数据：", response.data);

                    dropdown.render({
                        elem: '#input_sno_dropdown',
                        closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
                        data: response.data.map(function (item) {
                            return {
                                title: item.name, // 设置标题为教师编号(名称)名称
                                sno: item.sno // 设置值
                            };
                        }),
                        click: function (obj) {
                            console.log("点击了：", obj.title);
                            this.elem.val(obj.title); // 设置输入框的值为点击项的标题
                            this.elem.attr("data-sno", obj.sno) // 设置data-class-no为班级编号
                        },
                        style: 'min-width: 235px; max-height: 200px; overflow-y: auto;' // 设置下拉菜单最大高度和滚动条
                    });
                },
                error: function (xhr, status, error) {
                    console.error("请求失败: " + error);
                }
            });
        })

        // 监听课程编号的输入框的点击事件
        $('#input_courseNo_dropdown').click(() => {
            console.log("点击了专业的下拉菜单，查询专业信息");
            // 使用 Ajax 请求获取数据
            $.ajax({
                url: '/api/course/getAllDifferentCName', // 后端接口地址
                method: 'GET', // 请求方式
                dataType: 'json', // 预期服务器返回的数据类型
                success: function (response) {
                    // 假设返回的数据结构类似: [{ id: 1, title: 'Class 1' }, { id: 2, title: 'Class 2' }]
                    dropdown.render({
                        elem: '#input_courseNo_dropdown',
                        closeOnClick: false, // 不开启“打开与关闭的自动切换”，即点击输入框时始终为打开状态
                        data: response.data.map(function (item) {
                            return {
                                title: item.cname, // 设置标题为课程名称
                                courseNo: item.courseNo
                            };
                        }),
                        click: function (obj) {
                            console.log("点击了：", obj.title);
                            this.elem.val(obj.title); // 设置输入框的值为点击项的标题
                            console.log("data-courseNo的值为：", obj.courseNo);
                            this.elem.attr("data-courseNo", obj.courseNo)
                        },
                        style: 'min-width: 235px; max-height: 200px; overflow-y: auto;' // 设置下拉菜单最大高度和滚动条
                    });
                },
                error: function (xhr, status, error) {
                    console.error("请求失败: " + error);
                }
            });
        })
    })
</script>
<script>
</script>
</body>

</html>

<style>
    /* 将整个容器设置为 flex 布局，垂直和水平居中 */
    .center-container {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
    }

    /* 给表单添加一些内边距和背景 */
    .layui-form {
        padding: 20px;
    }

    .layui-form-label {
        text-align: center; /* 水平居中 */
    }

</style>

